<template>
  <!-- 系统功能-多数据源 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" label-width="88px"
                 @submit.native.prevent>
          <el-form-item label="数据库名称" prop="dbName">
            <el-input v-model.trim="filterForm.dbName" maxlength="30" clearable
                      placeholder="请输入内容" class="filter-item limit" @keyup.enter.native="handleFilter" />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button
          class="filter-item"
          type="primary"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button @click="handleReset"> 重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['SYS_DATA_ADD_BUTTON']"
            class="filter-item"
            icon="el-icon-plus"
            type="primary"
            @click="addDatasource"
          >
            新增
          </el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="datasourceList"
          highlight-current-row
          style="width: 100%;"
          :header-cell-style="headerCellStyle"
          border
          @sort-change="sortChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            key="dbName"
            align="center"
            prop="dbName"
            label="数据库名称"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[1].show"
            key="jdbcDriver"
            align="center"
            prop="jdbcDriver"
            label="驱动类型"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[2].show"
            key="username"
            align="center"
            prop="username"
            label="账号"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[3].show"
            key="password"
            align="center"
            prop="password"
            label="密码"
          />
          <el-table-column
            v-if="columns[4].show"
            key="jdbcUrl"
            align="center"
            prop="jdbcUrl"
            label="jdbc的url"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.jdbcUrl }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.jdbcUrl.slice(0,8) }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[5].show"
            key="remarks"
            align="center"
            prop="remarks"
            label="备注"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[6].show"
            key="createTime"
            align="center"
            prop="createTime"
            label="创建时间"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :key="Math.random()"
            label="操作"
            width="84"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-button
                slot="reference"
                v-permission="['SYS_DATA_DEL_BUTTON']"
                type="danger"
                size="mini"
                style="padding: 7px"
                title="确定删除吗？"
                @click="deleteDatasource(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="filterForm.pageNo"
          :limit.sync="filterForm.pageSize"
          @pagination="getList"
        />
      </div>
      <dtDialog
        title="新增数据源"
        :visible.sync="datasourceVisible"
        :is-loading="loading"
        @closeDialog="resetTemp"
        @comfirmBtn="insertDatasource"
      >
        <el-form
          ref="datasourceDataForm"
          slot="content"
          :rules="datasourceRules"
          :model="datasourceTemp"
          label-position="right"
          label-width="97px"
        >
          <el-form-item label="数据库名称" prop="dbName">
            <el-input v-model.trim="datasourceTemp.dbName" maxlength="50" placeholder="请输入数据库名称"
                      class="limit" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"
                      type="textarea" />
          </el-form-item>
          <el-form-item label="驱动类型" prop="jdbcDriver">
            <el-select
              v-model.trim="datasourceTemp.jdbcDriver"
              placeholder="请选择驱动类型"
              style="width: 100%"
              class="filter-item"
            >
              <el-option
                v-for="item in drviceList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="JDBC账号" prop="username">
            <el-input v-model.trim="datasourceTemp.username" maxlength="50" placeholder="请输入JDBC账号"
                      class="limit" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"
                      type="textarea" />
          </el-form-item>
          <el-form-item label="JDBC密码" prop="password">
            <el-input v-model.trim="datasourceTemp.password" maxlength="50" placeholder="请输入JDBC密码"
                      class="limit" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"
                      type="textarea" />
          </el-form-item>
          <el-form-item label="JDBC URL" prop="jdbcUrl">
            <el-input v-model.trim="datasourceTemp.jdbcUrl" maxlength="300" placeholder="请输入JDBC URL"
                      class="limit" show-word-limit :autosize="{ minRows: 5, maxRows: 5}"
                      type="textarea" />
          </el-form-item>
          <div style="color: #999!important;font-size: 14px;margin:30px 0 20px 100px;">参考：<br>
            oracle：jdbc:oracle:thin:\@127.0.0.1:1521:ORCLCDB<br>
            sql server：jdbc:sqlserver://127.0.0.1:1433;DatabaseName=dqbasic<br>
            pg sql：jdbc:postgresql://127.0.0.1:5432/dqbasic<br>
            mysql：jdbc:mysql://127.0.0.1:3306/dqbasic?autoReconnect=true&useUnicode=true<br>&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=CTT
          </div>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model.trim="datasourceTemp.remarks" :autosize="{ minRows: 4, maxRows: 4}" maxlength="100"
                      show-word-limit type="textarea" class="limit" />
          </el-form-item>
        </el-form>
      </dtDialog>
    </div>
  </div>
</template>
<script>
import databaseInfoApi from '@/framework/api/databaseInfo'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'

export default {
  name: 'Datasources',
  mixins: [dialogColumn],
  data() {
    return {
      loading: false,
      filterForm: {
        dbName: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      listLoading: true,
      datasourceList: [],
      drviceList: [
        { id: 1, name: 'MySQL', value: 'com.mysql.cj.jdbc.Driver' },
        { id: 2, name: 'Oracle', value: 'oracle.jdbc.OracleDriver' },
        { id: 3, name: 'SQL server', value: 'com.microsoft.sqlserver.jdbc.SQLServerDriver' },
        { id: 4, name: 'Postgre Sql', value: 'org.postgresql.Driver' }
      ],
      datasourceVisible: false,
      datasourceTemp: {
        jdbcUrl: '',
        password: '',
        username: '',
        jdbcDriver: '',
        dbName: ''
      },
      datasourceRules: {
        jdbcUrl: [
          { required: true, message: '请输入JDBC URL', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入JDBC密码', trigger: 'change' }
        ],
        username: [
          { required: true, message: '请输入JDBC账号', trigger: 'change' }
        ],
        jdbcDriver: [
          { required: true, message: '请选择驱动类型', trigger: 'change' }
        ],
        dbName: [
          { required: true, message: '请输入数据库名称', trigger: 'change' }
        ]
      },
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      datasourceListLength: 0,
      // 列信息
      columns: [
        { prop: 'dbName', label: '数据库名称', show: true },
        { prop: 'jdbcDriver', label: '驱动类型', show: true },
        { prop: 'username', label: '账号', show: true },
        { prop: 'password', label: '密码', show: true },
        { prop: 'jdbcUrl', label: 'jdbc的url', show: true },
        { prop: 'remarks', label: '备注', show: true },
        { prop: 'createTime', label: '创建时间', show: true }
      ]
    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    handleReset() {
      this.$refs.filterFormRef.resetFields()
      this.handleFilter()
    },
    sortChange(data) {
    },
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      databaseInfoApi.fetchPage(this.filterForm).then((res) => {
        this.datasourceList = res.data.rows
        this.datasourceListLength = res.data.rows.length
        this.total = res.data.totalRows
        this.listLoading = false
      })
    },
    resetTemp() {
      this.datasourceTemp = {
        jdbcUrl: '',
        password: '',
        username: '',
        jdbcDriver: '',
        dbName: ''
      }
    },
    addDatasource() {
      this.datasourceVisible = true
      this.$nextTick(() => {
        this.$refs['datasourceDataForm'].clearValidate()
      })
    },
    insertDatasource() {
      this.$refs['datasourceDataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          try {
            databaseInfoApi.add(this.datasourceTemp).then((res) => {
              this.getList()
              this.datasourceVisible = false
              this.$dtMessage({
                title: '成功',
                message: '新增成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
            }).catch((err) => {
              this.loading = false
            })
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    deleteDatasource(row) {
      this.$dtMessageBox({ title: '提示', message: `确认删除[${row.dbName}]数据吗？`, type: 'warning' }).then(() => {
        databaseInfoApi.delete(row).then((res) => {
          this.getList()
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
      })
    },
    table_index(index) {
      return (this.filterForm.pageNo - 1) * this.filterForm.pageSize + index + 1
    }
  }

}
</script>
<style lang="scss" scoped>
</style>
